<template>
	<view class="auth">
		<uv-navbar @leftClick="goBack" bgColor="linear-gradient(to right, #dffffa, #fff)"></uv-navbar>
		<view class="top"></view>
		<view class="welcome">
			<uv-text text="你好！" color="#256bee" size="32" />
			<uv-text text="欢迎来到邻事通贴一下" color="#256bee" size="20" />
		</view>
		<view class="content">
			<uv-tabs lineColor="#a5ecff" lineWidth="50" lineHeight="5" :list="tabsList" :scrollable="false"
				@click="tabsClick" :itemStyle="{ height: '25px', position: 'relative', zIndex: 2 }" />

			<form class="form" @submit="submit">
				<uv-form :model="model" labelPosition="top" labelWidth="200rpx">

					<!-- 手机号 -->
					<uv-form-item label="手机号" prop="phone" leftIcon="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/9f94b202508160925465331.png">
						<uv-input v-model="model.phone" placeholderStyle="color: #999999" border="none"
							placeholder="请输入手机号"
							customStyle="background-color: #EFEFEF;padding: 16rpx 20rpx;border-radius: 14rpx" />
					</uv-form-item>

					<!-- 验证码 -->
					<uv-form-item label="验证码" prop="code" leftIcon="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/f4cc5202508160926228983.png"
						v-if="type === 'register' || type === 'login' && loginType">
						<uv-input v-model="model.code" placeholderStyle="color: #999999" border="none"
							placeholder="请输入验证码"
							customStyle="background-color: #EFEFEF;padding: 16rpx 20rpx;border-radius: 14rpx">
							<template #suffix>
								<uv-text :text="textCode" color="#256bee" size="28rpx" @click="getCode" />
							</template>
						</uv-input>
					</uv-form-item>

					<!-- 密码 -->
					<uv-form-item prop="password" leftIcon="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/2c437202508160927073531.png"
						:label="type === 'login' ? '密码' : '设置密码'"
						v-if="type === 'register' || type === 'login' && !loginType">
						<uv-input v-model="model.password" placeholderStyle="color: #999999"
							:type="ispwd ? 'text' : 'password'" border="none" placeholder="请输入密码"
							customStyle="background-color: #EFEFEF;padding: 16rpx 20rpx;border-radius: 14rpx">
							<template #suffix>
								<uv-icon :name="ispwd ? 'eye' : 'eye-off-outline'" color="#999" size="20"
									@click="ispwd = !ispwd" />
							</template>
						</uv-input>
					</uv-form-item>

					<uv-text v-if="type === 'login'" :text="loginType ? '密码登录' : '验证码登录'" color="#333" size="28rpx"
						@click="loginType = !loginType" />

					<uv-gap height="20" bgColor="transparent" />


					<uv-button color="#46cffe" shape="circle" formType="submit"
						:text="type === 'login' ? '登录' : '注册并登录'" />

					<uv-code uniqueKey="auth" :seconds="10" ref="codeRef" @change="codeChange" />
				</uv-form>

			</form>
		</view>

	
		
		
		
		<view class="flex" style="padding-left: 30rpx;">
			<uv-checkbox-group v-model="checkbox" activeColor="#256bee" inactiveColor="#256bee" class="checkbox">
				<uv-checkbox shape="circle" :name="1" size="14">
				</uv-checkbox>
				<view>
					<text style="font-size: 24rpx; color: #333;">登录即代表您已阅读井同意</text>
					<text style="font-size: 24rpx; color: #256bee;" @click="goPolicy(7,1)">《用户协议》</text>
					<text style="font-size: 24rpx; color: #333;">与</text>
					<text style="font-size: 24rpx; color: #256bee;" @click="goPolicy(7,2)">《隐私政策》</text>
				</view>
			</uv-checkbox-group>
		
		
		</view>
		
		
		
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { getIconPath } from '@/util'
	import { storeToRefs } from "pinia"
	import { useUserStore } from '@/store'
	import { onLoad } from '@dcloudio/uni-app'
	import { login, register, smsSend } from '@/api'

	const user = useUserStore()
	const {
		token,
		expires,
		logo_timestamp,
		userInfo,
		logo_form
	} = storeToRefs(user)

	const checkbox = ref([])
	const ispwd = ref(false)
	const codeRef = ref(null)
	const isCode = ref(false)
	const type = ref('login')
	const redirect = ref(null)
	const loginType = ref(false) // 登录方式 code 验证码 pwd 密码
	const textCode = ref('获取验证码')
	const tabsList = ref([{
		name: '登录'
	}, {
		name: '注册'
	}])
	const model = reactive({
		phone: logo_form.value.phone || '',
		password: logo_form.value.password || '',
		code: ''
	})

	onLoad((option) => {
		if (option.redirect) redirect.value = decodeURIComponent(option.redirect)
	})

	const goBack = () => {
		uni.reLaunch({
			url: '/pages/user/index'
		})
	}
	
	const goPolicy = (type, agreement_type) => {
		let goUrl = "/pages-user/distributor/privacy_policy?type=" + type + "&agreement_type=" + agreement_type
		uni.navigateTo({
			url: goUrl,
			success: function(res) {
	
			},
			fail: function(err) {
				
			}
		})
	}

	/* 登录/注册 切换 */
	const tabsClick = (e) => {
		isCode.value = false

		if (e.index == 0) {
			model.code = ''
			model.phone = logo_form.value.phone || ''
			model.password = logo_form.value.password || ''
			type.value = 'login'
		} else {
			model.code = ''
			model.phone = ''
			model.password = ''
			type.value = 'register'
		}
	}

	/* 校验登录信息 */
	const verification = () => {
		return new Promise((resolve, reject) => {
			if (checkbox.value.length === 0) return uni.$uv.toast('请先同意协议')
			if (!uni.$uv.test.mobile(model.phone)) return uni.$uv.toast('请正确输入手机号')

			// if(
			// 	loginType.value && !isCode.value ||
			// 	type.value === 'register' && !isCode.value
			// ) return uni.$uv.toast('请先发送验证码')

			// if(
			// 	loginType.value && !model.code ||
			// 	type.value === 'register' && !model.code
			// ) return uni.$uv.toast('请输入验证码')

			if (!loginType.value && !model.password) return uni.$uv.toast('请输入密码')

			resolve()
		})
	}

	/* 登录 / 注册 */
	const submit = async () => {
		/* await verification()
		let res = null
		if (type.value === 'login') {
			uni.showLoading({
				title: '登录中...'
			})
			res = await login({
				phone_number: model.phone,
				password: model.password,
				type: loginType.value ? 'captcha' : 'pwd' 
			})
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			})
		} else {
			uni.showLoading({
				title: '注册中...'
			})
			res = await register({
				phone_number: model.phone,
				password: model.password,
				nickname: '新用户'
			})
			uni.showToast({
				title: '注册成功',
				icon: 'success'
			})
		}

		uni.hideLoading()

		initData(res.result) */
		uni.navigateTo({
			url: '/pages-nfc/index'
		})
	
	}

	/* 初始化登录 */
	const initData = (res) => {
		token.value = res.token
		userInfo.value = res.user_info
		logo_timestamp.value = new Date().getTime()
		expires.value = Math.floor(Number(res.expires_in) * 1000)
		logo_form.value = {
			phone: model.phone,
			password: model.password
		}

		const tabBar = uni.$config.tabBar

		if (redirect.value) {
			const path = redirect.value.split('?')[0]
			if (tabBar.includes(path)) {
				uni.reLaunch({
					url: redirect.value
				})
			} else {
				uni.redirectTo({
					url: redirect.value
				})
			}
		} else {
			uni.reLaunch({
				url: uni.$config.homePahe
			})
		}
	}

	const getCode = () => {
		isCode.value = true
		codeRef.value.start()
		uni.$uv.toast('验证码发送成功');
	}

	const codeChange = (text) => textCode.value = text
</script>

<style lang="scss" scoped>
	.auth {
		height: 100vh;
		background: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0811/44840202508111140288316.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top {
		height: calc(20vh + var(--status-bar-height));
	}

	.welcome {
		position: absolute;
		top: 100px;
		padding-left: 20px;
	}

	.content {
		margin: 30rpx;
		padding: 30rpx;
		margin-top: 60rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.checkbox {
		::v-deep .uv-checkbox {
			margin: 0 auto;
		}
	}

	.form {
		margin: 40rpx 20rpx;

		.item {
			margin-bottom: 30rpx;


			::v-deep .uv-input {
				padding: 16upx 20upx !important;

				border: none !important;
				border-radius: 14rpx !important;
				background-color: #EFEFEF !important;
			}
		}
	}
</style>